JavaScript teljesítményoptimalizálás: Kódszétválasztás vs. Lusta kiértékelés

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    

      Loading...
}>
        
      
    

Ebben a példában az OtherComponent csak akkor töltődik be, amikor renderelődik. Amíg betöltődik, a felhasználó a "Loading..." üzenetet látja.

Eszközök a kódszétválasztáshoz

• Webpack: Egy népszerű modulkötegelő, amely különféle kódszétválasztási technikákat támogat.
• Rollup: Egy másik modulkötegelő, amely kis, hatékony csomagok létrehozására összpontosít.
• Parcel: Egy nulla konfigurációjú kötegelő, amely automatikusan kezeli a kódszétválasztást.
• Vite: Egy build eszköz, amely natív ES modulokat használ a gyors fejlesztéshez és optimalizált produkciós buildekhez.

Lusta kiértékelés: Számítások elhalasztása

Mi az a lusta kiértékelés?

A lusta kiértékelés, más néven halasztott kiértékelés, egy olyan programozási technika, ahol egy kifejezés kiértékelése addig késik, amíg az értékére ténylegesen szükség van. Más szóval, a számításokat csak akkor hajtják végre, amikor az eredményeikre szükség van, ahelyett, hogy azonnal előre kiszámítanák őket.

Képzelje el, hogy több fogásos ételt készít. Nem főzne meg minden ételt egyszerre. Ehelyett minden ételt csak akkor készítene el, amikor eljön a tálalás ideje. A lusta kiértékelés hasonlóan működik, csak akkor hajtja végre a számításokat, amikor az eredményeikre szükség van.

Hogyan működik a lusta kiértékelés?

JavaScriptben a lusta kiértékelés különböző technikákkal valósítható meg:

• Függvények: Egy kifejezés függvénybe való csomagolása lehetővé teszi az értékelésének elhalasztását a függvény meghívásáig.
• Generátorok: A generátorok módot biztosítanak iterátorok létrehozására, amelyek igény szerint állítanak elő értékeket.
• Memorizálás (Memoization): A memorizálás magában foglalja a drága függvényhívások eredményeinek gyorsítótárazását, és a gyorsítótárazott eredmény visszaadását, amikor ugyanazok a bemenetek ismétlődnek.
• Proxy-k: A proxy-k segítségével le lehet fogni a tulajdonságok hozzáférését, és el lehet halasztani a tulajdonságértékek számítását addig, amíg ténylegesen hozzáférnek hozzájuk.

A lusta kiértékelés előnyei

• Javult teljesítmény: A felesleges számítások elhalasztásával a lusta kiértékelés jelentősen javíthatja a teljesítményt, különösen nagy adathalmazok vagy komplex számítások esetén.
• Csökkentett memóriahasználat: A lusta kiértékelés csökkentheti a memóriahasználatot azáltal, hogy elkerüli az azonnal nem szükséges köztes értékek létrehozását.
• Növelt reszponzivitás: A felesleges számítások elkerülésével a kezdeti betöltés során a lusta kiértékelés növelheti az alkalmazás reszponzivitását.
• Végtelen adatstruktúrák: A lusta kiértékelés lehetővé teszi, hogy végtelen adatstruktúrákkal, például végtelen listákkal vagy adatfolyamokkal dolgozzon, csak a szükséges elemeket kiszámítva igény szerint.

Példa: Képek lusta betöltése

A lusta kiértékelés gyakori felhasználási esete a képek lusta betöltése. Ahelyett, hogy az összes képet előre betöltené egy oldalon, elhalaszthatja azoknak a képeknek a betöltését, amelyek kezdetben nem láthatók a nézetablakban. Ez jelentősen javíthatja a kezdeti oldalbetöltési időt és csökkentheti a hálózati sávszélesség-felhasználást.

function lazyLoadImages() {
  const images = document.querySelectorAll('img[data-src]');
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  });
  images.forEach((img) => {
    observer.observe(img);
  });
}

document.addEventListener('DOMContentLoaded', lazyLoadImages);

Ez a példa az IntersectionObserver API-t használja annak észlelésére, hogy mikor lép be egy kép a nézetablakba. Amikor egy kép láthatóvá válik, a src attribútuma a data-src attribútum értékére állítódik, ami elindítja a kép betöltését. Az observer ezután leállítja a kép figyelését, hogy megakadályozza annak ismételt betöltését.

Példa: Memorizálás

A memorizálás használható a drága függvényhívások optimalizálására. Íme egy példa:

function memoize(func) {
  const cache = {};
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache[key]) {
      return cache[key];
    }
    const result = func(...args);
    cache[key] = result;
    return result;
  };
}

function expensiveCalculation(n) {
  // Simulate a time-consuming calculation
  for (let i = 0; i < 100000000; i++) {
    // Do something
  }
  return n * 2;
}

const memoizedCalculation = memoize(expensiveCalculation);

console.time('First call');
console.log(memoizedCalculation(5)); // First call - takes time
console.timeEnd('First call');

console.time('Second call');
console.log(memoizedCalculation(5)); // Second call - returns cached value instantly
console.timeEnd('Second call');

Ebben a példában a memoize függvény bemenetként egy függvényt vesz fel, és visszaadja annak egy memorizált változatát. A memorizált függvény gyorsítótárazza a korábbi hívások eredményeit, így az azonos argumentumokkal történő későbbi hívások a gyorsítótárazott eredményt adhatják vissza az eredeti függvény újbóli végrehajtása nélkül.

Kódszétválasztás vs. Lusta kiértékelés: Fő különbségek

Bár mind a kódszétválasztás, mind a lusta kiértékelés hatékony optimalizálási technikák, a teljesítmény különböző aspektusait kezelik:

• Kódszétválasztás: A kezdeti csomagméret csökkentésére összpontosít, a kód kisebb darabokra osztásával és igény szerinti betöltésével. Elsősorban a kezdeti oldalbetöltési idő javítására szolgál.
• Lusta kiértékelés: Az értékek számításának elhalasztására összpontosít, amíg ténylegesen szükség van rájuk. Elsősorban a teljesítmény javítására szolgál drága számítások vagy nagy adathalmazok kezelésekor.

Lényegében a kódszétválasztás csökkenti az előre letöltendő kód mennyiségét, míg a lusta kiértékelés csökkenti az előre elvégzendő számítások mennyiségét.

Mikor használjunk kódszétválasztást vs. lusta kiértékelést

Kódszétválasztás

• Nagy alkalmazások: Használjon kódszétválasztást olyan alkalmazásokhoz, amelyek sok JavaScript kódot tartalmaznak, különösen azokhoz, amelyek több útvonallal vagy funkcióval rendelkeznek.
• Kezdeti betöltési idő javítása: Használjon kódszétválasztást a kezdeti oldalbetöltési idő javítására és az interaktívvá válási idő csökkentésére.
• Hálózati sávszélesség csökkentése: Használjon kódszétválasztást a hálózaton keresztül továbbítandó adatok mennyiségének csökkentésére.

Lusta kiértékelés

• Drága számítások: Használjon lusta kiértékelést olyan függvényekhez, amelyek drága számításokat végeznek vagy nagy adathalmazokhoz férnek hozzá.
• Reszponzivitás javítása: Használjon lusta kiértékelést az alkalmazás reszponzivitásának javítására a felesleges számítások elhalasztásával a kezdeti betöltés során.
• Végtelen adatstruktúrák: Használjon lusta kiértékelést végtelen adatstruktúrákkal való munkához, mint például végtelen listák vagy adatfolyamok.
• Média lusta betöltése: Valósítson meg lusta betöltést képek, videók és egyéb médiaeszközök esetén az oldalbetöltési idők javítása érdekében.

A kódszétválasztás és a lusta kiértékelés kombinálása

Sok esetben a kódszétválasztás és a lusta kiértékelés kombinálható, hogy még nagyobb teljesítménynövekedést érjünk el. Például használhatja a kódszétválasztást az alkalmazás kisebb darabokra való felosztására, majd a lusta kiértékelést az értékek számításának elhalasztására ezeken a darabokon belül.

Tekintsünk egy e-kereskedelmi alkalmazást. Használhatna kódszétválasztást az alkalmazás különálló csomagokra való felosztására a terméklista oldal, a termék részletes oldala és a pénztár oldal számára. Ezután a termék részletes oldalán belül lusta kiértékelést használhatna a képek betöltésének vagy a termékajánlások számításának elhalasztására, amíg ténylegesen szükség van rájuk.

A kódszétválasztáson és lusta kiértékelésen túl: További optimalizálási technikák

Bár a kódszétválasztás és a lusta kiértékelés hatékony technikák, csak két darabja a JavaScript teljesítményoptimalizálásának. Íme néhány további technika, amelyet a teljesítmény további javítására használhat:

• Minifikálás: Távolítsa el a szükségtelen karaktereket (pl. szóközök, megjegyzések) a kódból a méretének csökkentése érdekében.
• Tömörítés: Tömörítse a kódot Gzip vagy Brotli eszközökkel a méretének további csökkentése érdekében.
• Gyorsítótárazás: Használja ki a böngésző gyorsítótárazását és a CDN gyorsítótárazását a szerver felé irányuló kérések számának csökkentésére.
• Tree Shaking (Fahomályosítás): Távolítsa el a nem használt kódot a csomagjaiból a méretük csökkentése érdekében.
• Képoptimalizálás: Optimalizálja a képeket tömörítéssel, megfelelő méretre állítással és modern képformátumok, például a WebP használatával.
• Debouncing és Throttling: Szabályozza az eseménykezelők végrehajtásának sebességét a teljesítményproblémák megelőzése érdekében.
• Hatékony DOM manipuláció: Minimalizálja a DOM manipulációkat és használjon hatékony DOM manipulációs technikákat.
• Web Workers: Vigye át a számításigényes feladatokat web worker-ekre, hogy megakadályozza a fő szál blokkolását.

Összegzés

A JavaScript teljesítményoptimalizálás kulcsfontosságú eleme a pozitív felhasználói élmény biztosításának és az üzleti célok elérésének. A kódszétválasztás és a lusta kiértékelés két hatékony technika, amelyek jelentősen javíthatják a teljesítményt a kezdeti betöltési idők csökkentésével, a hálózati sávszélesség-felhasználás mérséklésével és a felesleges számítások elhalasztásával. Azáltal, hogy megérti ezeknek a technikáknak a működését és mikor kell őket használni, gyorsabb, reszponzívabb és élvezetesebb webalkalmazásokat hozhat létre.

Ne feledje figyelembe venni az egyedi alkalmazáskövetelményeit, és használja azokat a technikákat, amelyek a legmegfelelőbbek az Ön igényeinek. Folyamatosan figyelje alkalmazása teljesítményét, és ismételje meg optimalizálási stratégiáit, hogy a lehető legjobb felhasználói élményt nyújtsa. Fogadja el a kódszétválasztás és a lusta kiértékelés erejét, hogy olyan webalkalmazásokat hozzon létre, amelyek nemcsak funkciókban gazdagok, hanem nagy teljesítményűek és világszerte örömteliek is használni.

További tanulmányi források

• Webpack dokumentáció: https://webpack.js.org/
• Rollup dokumentáció: https://rollupjs.org/guide/en/
• Vite dokumentáció: https://vitejs.dev/
• MDN Web Docs - Intersection Observer API: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
• Google Developers - JavaScript végrehajtás optimalizálása: https://developers.google.com/web/fundamentals/performance/optimizing-javascript/